<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="searchObj.orderNo" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select v-model="searchObj.status" placeholder="支付状态">
          <el-option label="已支付" value="1"></el-option>
          <el-option label="未支付" value="0"></el-option>
          <el-option label="已发货" value="2"></el-option>
          <el-option label="已收获" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" >查询</el-button>
        <el-button type="primary" >全部</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="orderList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="115">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="220" align="center" >
        <template slot-scope="scope">
          {{ scope.row.orderNo }}
        </template>
      </el-table-column>
      <el-table-column label="课程" width="220"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.courseTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="讲师" width="220"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.teacherName }}</span>
        </template>
        </el-table-column>
      <el-table-column label="状态" width="220" align="center">
        <template slot-scope="scope">
          {{ orderStatus[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="220"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalFee }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间" width="300">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" >操作订单</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
  import order from '@/api/order'
    export default {
        name: "index",
      data(){
          return{
            orderStatus:{//订单状态
              0:'未支付',
              1:'已支付',
              2:'已发货',
              3:'已收货'
            },
            searchObj:{//查询条件

            },
            orderList:[],//订单列表
            current:1,//当前页
            size:10,//默认每页大小
            total:0,//总记录数
          }
      },
      methods:{
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        //获取订单列表
        getOrderList(){
          console.log(this.searchObj)
          order.getOrderList(this.current,this.size,this.searchObj)
            .then(response=>{
              console.log(response)
              this.orderList = response.data.page.records
              this.total = response.data.page.total
            })
        }
      },
      created() {
        //获取订单列表
        this.getOrderList()
      }
    }
</script>

<style scoped>

</style>
